<template>
  <div>
    <h1>组件作用域样式</h1>

    <hr />

    <Hello />

    <hr />

    <World />

    <hr />

    <HelloWorld />
  </div>
</template>

<script>
// 引入其他的模块，组件
import Hello from './Hello.vue'
import World from './World.vue'
import HelloWorld from './HelloWorld.vue'

export default {
  // 局部注册
  components: {
    Hello,
    World,
    HelloWorld
  }
}
</script>

<style scoped>
.a {
  color: red;
}

/* 该 css 不会对 Hello 与 World 生效 */
p {
  color: #fff;
}

/**
  [data-v-7a7a37b1] p {
    color: #fff;
  }
*/
/* :deep(p) {
  color: #fff;
} */

:global(p) {
  color: #fff;
}
</style>

<!-- <style>
p {
  color: #fff;
}
</style> -->
